<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="热量换算" name="hat">
        <div class="count_tab_content">
          <div>
            <div class="left count_box">
              <el-input maxlength="10" :disabled="countType === 'right'" v-model="h_value"></el-input>
              <el-select v-model="h_unit" placeholder="请选择">
                <el-option
                  v-for="unit in unitList"
                  :key="unit.value"
                  :label="unit.label"
                  :value="unit.value"
                ></el-option>
              </el-select>
            </div>
            <span>=</span>
            <div class="right count_box">
              <el-input maxlength="10" :disabled="countType === 'left'" v-model="f_value"></el-input>
              <el-select v-model="f_unit" placeholder="请选择">
                <el-option
                  v-for="unit in foodUnitList"
                  :key="unit.value"
                  :label="unit.label"
                  :value="unit.value"
                ></el-option>
              </el-select>
              <el-select v-model="f_type" placeholder="请选择">
                <el-option
                  v-for="food in foodList"
                  :key="food.id"
                  :label="food.name"
                  :value="food.id"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="count_trans_button">
          <el-button type="primary" @click="transType">切换</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="单位换算" name="conversion">
        <div class="count_tab_content">
          <div class="left count_box">
            <el-input maxlength="5" v-model="h_value"></el-input>
            <el-select v-model="h_unit_left" placeholder="请选择">
              <el-option
                v-for="unit in unitList"
                :key="unit.value"
                :label="unit.label"
                :value="unit.value"
              ></el-option>
            </el-select>
          </div>
          <span>=</span>
          <div class="right count_box">
            <el-input maxlength="5" v-model="h_value2" disabled></el-input>
            <el-select v-model="h_unit_right" placeholder="请选择">
              <el-option
                v-for="unit in unitList"
                :key="unit.value"
                :label="unit.label"
                :value="unit.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { queryAllFood, queryAllElementList }  from './api.js'

const activeName = ref('hat')

const countType = ref('left')

// 热量单位
const h_unit = ref('j')
// 热量值
const h_value = ref('1000')
// 第二换算热量单位
const h_unit_left = ref('cal')
const h_unit_right = ref('j')
// 第二换算热量值
const h_value2 = ref('4.184')

// 食物单位
const f_unit = ref('g')
// 食物值
const f_value = ref('')
// 食物类型
const f_type = ref('')

// 热量单位
const unitList = [
  {
    value: 'kcal',
    weight: 4184,
    label: '千卡(卡路里)',
  },
  {
    value: 'kj',
    weight: 1000,
    label: '千焦',
  },
  {
    value: 'cal',
    weight: 4.184,
    label: '卡',
  },
  {
    label: '焦耳',
    weight: 1,
    value: 'j',
  }
]
// 食物单位
const foodUnitList = [
  {
    value: 'g',
    weight: 1,
    label: '克',
  },
  {
    value: 'kg',
    weight: 1000,
    label: '千克',
  }
]
// 食物列表
const foodList = ref([])

// 元素对应热量的字典
const elementMap = {}

const foodJ = computed(() => {
  // 每克热量 * 食物单位倍数
  console.log(f_unit.value, '===========>', f_type.value)
  if (f_unit.value && f_type.value) {
    const food = foodList.value.find((item) => item.id === f_type.value)
    const food_mag = foodUnitList.find((item) => item.value === f_unit.value).weight
    console.log(food, '===========>')
    if (food && food.nutrition_list) {
      // 根据食物的元素含量计算热量
      let food_hat = 0
      const food_nutritions = JSON.parse(food.nutrition_list) || []
      food_nutritions.forEach((item) => {
        const { id } = item
        if (elementMap[id]) {
          food_hat += elementMap[id]
        }
      })
      return (food_hat / 100) * food_mag
    }
  }
  return 0
})

const countHat = computed(() => {
  // 总热量
  if (h_unit.value && h_value.value) {
    const mag = unitList.find((item) => item.value === h_unit.value).weight
    return Number(h_value.value) * mag
  }
  return 0
})

const left_hat = computed(() => {
  // 总热量
  if (h_unit_left.value && h_value.value) {
    const mag = unitList.find((item) => item.value === h_unit_left.value).weight
    return Number(h_value.value) * mag
  }
  return 0
})

onMounted(() => {
  queryAllFood().then((res) => {
    foodList.value = res.result
  })
  queryAllElementList().then((res) => {
    const { result } = res
    result.forEach((item) => {
      elementMap[item.id] = Number(item.heat) || 0
    })
  })
})

const transType = () => {
  if (countType.value === 'left') {
    countType.value = 'right'
  } else {
    countType.value = 'left'
  }
}

watch(countHat, () => {
  if (countType.value === 'left') {
    countFood()
  } else {
    countHatValue()
  }
})

watch(foodJ, () => {
  console.log(foodJ, '===========>')
  if (countType.value === 'left') {
    countFood()
  } else {
    countHatValue()
  }
})

watch(f_value, () => {
  if (countType.value === 'left') {
    countFood()
  } else {
    countHatValue()
  }
})

watch(activeName, () => {
  if (activeName.value === 'hat') {
    // 初始值
    h_value.value = '1000'
    h_unit.value = 'j'
    f_value.value = ''
    f_unit.value = 'g'
    f_type.value = ''
  } else {
    // 初始值
    h_value.value = '1'
    h_unit_left.value = 'cal'
    h_unit_right.value = 'j'
    h_value2.value = '4.184'
  }
})

watch(left_hat, () => {
  if (h_unit_right.value) {
    countUnitHat()
  }
})

watch(h_unit_right, () => {
  if (left_hat.value) {
    countUnitHat()
  }
})

const countUnitHat = () => {
  const mag = unitList.find((item) => item.value === h_unit_right.value).weight
  h_value2.value = (left_hat.value / mag).toFixed(3).toString()
}

const countFood = () => {
  // 根据热量单位计算食物的重量
  if ((foodJ.value || foodJ.value === 0) && countHat.value) {
    if (foodJ.value === 0) {
      f_value.value = '0'
    } else {
      const number = (countHat.value / foodJ.value).toFixed(3)
      f_value.value = number.toString()
    }
  }
}

const countHatValue = () => {
  // 根据食物重量计算热量
  if ((foodJ.value || foodJ.value === 0) && (f_value.value || f_value.value === 0) && h_unit.value) {
    if (foodJ.value === 0 || f_value.value === 0) {
      h_value.value = '0'
    } else {
      const mag = unitList.find((item) => item.value === h_unit.value).weight
      const number = Number(f_value.value) * foodJ.value / mag
      h_value.value = number.toFixed(3).toString()
    }
  }
}

</script>

<style lang="scss" scoped>
.count_tab_content {
  margin: 20px;
  margin-top: 60px;
  border: 2px solid #5193e9;
  padding: 20px 0;
  border-radius: 20px;
}
.count_trans_button {
  display: flex;
  justify-content: end;
  padding-right: 40px;
}
.count_box {
  display: flex;
  padding: 20px;
}
</style>
